<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>锋华商品表</title>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<link rel="stylesheet" href="./css/reset.css">
		<link rel="stylesheet" href="./css/shop.css">
		<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
		<!-- import JavaScript -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

	</head>
	<body>

		<figure>
			<img :src=rush.ShopImg alt="">
		</figure>
		<div id="ShopMessage">

			<span style="display: block;width: 100%;text-align: center;font-family: 黑体; font-size: 30px;">
				{{rush.ShopName}}
			</span>
			<p style="font-family: 黑体; font-size: 25px;width: 100%;text-align: left;margin-top: 4px;">
				商品类型：{{rush.ShopType}}
			</p>
			<p style="font-family: 黑体; font-size: 25px;width: 100%;text-align: center;margin-top: 4px;">
			{{rush.ShopDetail}}
			</p>
			<el-row style="top: 50%;left:40%">
				<span style="font-size: 20px;">数量<span style="color:blueviolet">{{Number}}</span></span>
				<el-button type="primary" icon="el-icon-plus" @click="o()"></el-button>
				<el-button type="primary" @click="Buy()">{{Number*rush.ShopPrice}}元直接购买</el-button>
				<el-button type="success">加入购物车</el-button>
			</el-row>
			<el-form ref="form" :model="form" label-width="80px" style="position: absolute;top: 10%;left: 64%;">
				<el-form-item label="姓名">
					<el-input v-model="form.Name"></el-input>
				</el-form-item>
				<el-form-item label="联系电话">
					<el-input v-model="form.Iphone"></el-input>
				</el-form-item>
				<el-form-item label="收获地址">
					<el-input v-model="form.Address"></el-input>
				</el-form-item>
				<el-form-item label="支付方式">
					<el-select v-model="form.W" placeholder="请选则支付方式">
						<el-option label="支付宝支付" value="支付宝支付"></el-option>
						<el-option label="微信支付" value="微信支付"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
		</div>
	</body>
	<script>
		//因为需要解析购物界面传递过来的参数，所以就不必倒入外部js文件
		var searchUrl = window.location.href;
		var searchData = searchUrl.split("{", ); //截取 url中的“=”,获得“=”后面的参数
		var searchText = decodeURI(searchData[1]); //decodeURI解码
		var json = JSON.parse("{" + searchText);
		console.log(json);
		new Vue({
			el: "figure",
			data() {
				return {
					rush: json,

				}
			}
		});
		new Vue({
			el: "#ShopMessage",
			data() {
				return {
					rush: json,
					form: {
						Name: '',
						Address: '',
						Iphone: "",
						W: ''
					},
					Number: 0
				}
			},
			methods: {
				Buy() {
					this.$confirm('确定购买该产品吗?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.$message({
							type: 'success',
							message: '购买成功!'
						});
						var data={SellId:"",
						ShopName:""};
						//console.log(data)
						data.SellId=this.rush.id;
						data.ShopName=this.rush.ShopName;
						data.Number =this.Number;
						data.TotailPrice=this.Number*this.rush.ShopPrice;
						data.TheName=this.form.Name;
						data.Iphone=this.form.Iphone;
						data.Address=this.form.Address;
						data.Pay=this.form.W;
						var JD=JSON.stringify(data);
						console.log(JD)
						$.post("http://localhost/InsertOrderServlet",{datas:JD});
						
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '购买取消'
						});
						
					});
				},
				o() {
					this.Number += 1
				}
			},
		});
	</script>
</html>
